<template>
  <fe-page title="人员详情" @back="goBack">
    <template #extra v-if="userId != '1'">
      <el-button type="primary" icon="Edit" @click="handleUpdate" v-hasPermi="['system:user:edit']">编辑</el-button>
      <el-button type="primary" icon="Key" @click="handleResetPwd" v-hasPermi="['system:user:resetPwd']">重置密码</el-button>
      <el-button type="danger" icon="Delete" @click="handleDelete" v-hasPermi="['system:user:remove']">删除</el-button>
		</template>
    <el-tabs type="border-card">
      <el-tab-pane label="个人信息">
        <el-form ref="formRef" :model="form" label-width="120px" v-loading="loading">
          <div class="title">基本信息</div>
          <el-row :gutter="48" class="form-box">
            <el-col :xs="24" :md="12">
              <el-form-item label="账户:">{{ form.username || '--' }}</el-form-item>
            </el-col>
            <el-col :xs="24" :md="12">
              <el-form-item label="密码:">不可见</el-form-item>
            </el-col>
            <el-col :xs="24" :md="12">
              <el-form-item label="姓名:">{{ form.nickname || '--' }}</el-form-item>
            </el-col>
            <el-col :xs="24" :md="12">
              <el-form-item label="所属部门:">{{ form.deptName || '--' }}</el-form-item>
            </el-col>
            <el-col :xs="24" :md="12">
              <el-form-item label="员工职务:">
                <dict-tag :options="sys_user_post" :value="form.extra?.post" v-if="form.extra?.post"></dict-tag>
                <span v-else>--</span>
              </el-form-item>
            </el-col>
            <el-col :xs="24" :md="12">
              <el-form-item label="手机号码:" prop="phone">{{ form.phone || '--' }}</el-form-item>
            </el-col>
            <el-col :xs="24" :md="12">
              <el-form-item label="微信账号:" prop="wexin">{{ form.extra?.wexin || '--' }}</el-form-item>
            </el-col>
            <el-col :xs="24" :md="12">
              <el-form-item label="邮箱地址:" prop="email">{{ form.email || '--' }}</el-form-item>
            </el-col>
            <el-col :xs="24" :md="12">
              <el-form-item label="出生日期:" prop="birthday">{{ form.extra?.birthday || '--' }}</el-form-item>
            </el-col>
            <el-col :xs="24" :md="12">
              <el-form-item label="性别:" prop="gender"><dict-tag :options="sys_user_sex" :value="form.gender" /></el-form-item>
            </el-col>
            <el-col :xs="24" :md="12">
              <el-form-item label="角色:" prop="roleIds">{{ getRoleName(form.roleIds) || '--' }}</el-form-item>
            </el-col>
            <el-col :xs="24" :md="12">
              <el-form-item label="状态:"><dict-tag :options="sys_normal_disable" :value="form.disable" /></el-form-item>
            </el-col>
          </el-row>
          <div class="title">详细信息</div>
          <el-row :gutter="48" class="form-box">
            <el-col :xs="24" :md="12">
              <el-form-item label="籍贯:" prop="domicile">{{ form.extra?.domicile || '--' }}</el-form-item>
            </el-col>
            <el-col :xs="24" :md="12">
              <el-form-item label="学历:" prop="education">
                <dict-tag :options="sys_user_education" :value="form.extra?.education" v-if="form.extra?.education"></dict-tag>
                <span v-else>--</span>
              </el-form-item>
            </el-col>
            <el-col :xs="24" :md="12">
              <el-form-item label="专业:" prop="major">{{ form.extra?.major || '--' }}</el-form-item>
            </el-col>
            <el-col :xs="24" :md="12">
              <el-form-item label="毕业院校:" prop="school">{{ form.extra?.school || '--' }}</el-form-item>
            </el-col>
            <el-col :xs="24" :md="12">
              <el-form-item label="毕业时间:" prop="graduation">{{ form.extra?.graduation || '--' }}</el-form-item>
            </el-col>
            <el-col :span="24">
              <el-form-item label="个人简介:">{{ form.remark || '--' }}</el-form-item>
            </el-col>
          </el-row>
        </el-form>
      </el-tab-pane>
      <el-tab-pane label="登录日志">
        <el-table border v-loading="loginLoading" :data="loginList">
          <el-table-column prop="startTime" label="登录时间" width="160">
            <template #default="scope">
              <span>{{ parseTime(scope.row.startTime) }}</span>
            </template>
          </el-table-column>
          <el-table-column prop="browser" label="浏览器" show-overflow-tooltip />
          <el-table-column prop="os" label="操作系统" show-overflow-tooltip />
          <el-table-column prop="clientIp" label="客户端ip" show-overflow-tooltip />
          <el-table-column prop="clientAddr" label="请求地址" show-overflow-tooltip />
          <el-table-column prop="userAgent" label="用户代理" show-overflow-tooltip />
        </el-table>
        <pagination v-show="loginTotal > 0" :total="loginTotal" v-model:page="loginParams.current" v-model:limit="loginParams.size" @pagination="getLoginList" />
      </el-tab-pane>
      <el-tab-pane label="操作记录">
        <el-table border v-loading="operateLoading" :data="operateList">
          <el-table-column prop="startTime" label="操作时间" width="160">
            <template #default="scope">
                <span>{{ parseTime(scope.row.startTime) }}</span>
              </template>
            </el-table-column>
          <el-table-column prop="serviceName" label="服务名" show-overflow-tooltip />
          <el-table-column prop="className" label="类名" show-overflow-tooltip />
          <el-table-column prop="title" label="日志标题" show-overflow-tooltip />
          <el-table-column prop="executeTime" label="执行耗时" show-overflow-tooltip />
          <el-table-column prop="clientIp" label="客户端ip" show-overflow-tooltip />
          <el-table-column prop="clientAddr" label="请求地址" show-overflow-tooltip />
          <el-table-column prop="userAgent" label="用户代理" show-overflow-tooltip />
          <el-table-column prop="requestUri" label="请求url" show-overflow-tooltip />
          <el-table-column prop="requestMethod" label="请求方式" show-overflow-tooltip />
          <el-table-column prop="method" label="方法名" show-overflow-tooltip />
          <el-table-column prop="params" label="表单参数" show-overflow-tooltip />
          <el-table-column prop="args" label="请求参数" show-overflow-tooltip />
          <el-table-column prop="resCode" label="	响应代码" show-overflow-tooltip />
          <el-table-column prop="resData" label="响应数据" show-overflow-tooltip />
        </el-table>
        <pagination v-show="operateTotal > 0" :total="operateTotal" v-model:page="operateParams.current" v-model:limit="operateParams.size" @pagination="getOperateList" />
      </el-tab-pane>
    </el-tabs>
  </fe-page>
</template>

<script setup name="UserView">
import { getUser, resetUserPwd, delUser } from "@/api/system/user"
import { listRole } from "@/api/system/role"
import { listLogininfor } from "@/api/system/logininfor"
import { listOperlog } from "@/api/system/operlog"

const route = useRoute()
const { proxy } = getCurrentInstance()
const { sys_normal_disable, sys_user_post, sys_user_sex, sys_user_education } = proxy.useDict("sys_normal_disable", "sys_user_post", "sys_user_sex", "sys_user_education")

const loading = ref(true)
const userId = route.params && route.params.userId
const form = ref({})
const roleOptions = ref([])
const loginLoading = ref(false)
const loginParams = reactive({
  current: 1,
  size: 10,
  logType: 'LOGIN',
  createId: userId
})
const loginList = ref([])
const loginTotal = ref(0)
const operateLoading = ref(false)
const operateParams = reactive({
  current: 1,
  size: 10,
  logType: 'OPERATE',
  createId: userId
})
const operateList = ref([])
const operateTotal = ref(0)

function getInfo() {
	loading.value = true
	getUser(userId).then(response => {
		loading.value = false
		let result = response.result || {}
    form.value = result
  })
}

function getRoleList() {
  listRole({ size: -1, disable: false }).then(response => {
    const result = response.result || {}
    roleOptions.value = result.records || []
  })
}

function getRoleName(arr = []) {
  return arr.map(key => {
    let curRole = roleOptions.value.find(v => v.roleId === key)
    return curRole?.roleName
  }).join(',')
}

function handleUpdate() {
  const obj = { path: "/system/user-data/edit/" + userId, query: { t: Date.now(), current: route.query.current }}
  proxy.$tab.closeOpenPage(obj)
}

function handleResetPwd() {
  proxy.$prompt('请输入"' + form.value.nickname + '"的新密码', "提示", {
    confirmButtonText: "确定",
    cancelButtonText: "取消",
    closeOnClickModal: false,
    inputPattern: /^.{5,20}$/,
    inputErrorMessage: "用户密码长度必须介于 5 和 20 之间",
    inputValidator: (value) => {
      if (/<|>|"|'|\||\\/.test(value)) {
        return "不能包含非法字符：< > \" ' \\\ |"
      }
    },
  }).then(({ value }) => {
    resetUserPwd(userId, value).then(response => {
      proxy.$modal.msgSuccess("修改成功，新密码是：" + value)
    })
  }).catch(() => {})
}

function handleDelete() {
  const userIds = form.value.userId
  const userNames = form.value.nickname
  proxy.$modal.confirm('是否确认删除成员姓名为"' + userNames + '"的成员?').then(function () {
    return delUser(userIds)
  }).then(() => {
    getList()
    proxy.$modal.msgSuccess("删除成功")
  }).catch(() => {})
}

function getLoginList() {
  loginLoading.value = true
  listLogininfor(loginParams).then(res => {
    const result = res.result || {}
    loginList.value = result.records || []
    loginTotal.value = Number(result.total)
    loginLoading.value = false
  })
}

function getOperateList() {
  operateLoading.value = true
  listOperlog(operateParams).then(res => {
    const result = res.result || {}
    operateList.value = result.records || []
    operateTotal.value = Number(result.total)
    operateLoading.value = false
  })
}

function goBack() {
  const obj = { path: "/system/user",  query: { t: Date.now(), current: route.query.current }}
  proxy.$tab.closeOpenPage(obj)
}

getRoleList()
getInfo()
getLoginList()
getOperateList()
</script>

<style lang="scss" scoped>
.title{
	margin-bottom: 16px;
	padding-left: 8px;
	font-weight: 600;
	font-size: var(--el-font-size-medium);
	position: relative;
	&::before{
		content: '';
		position: absolute;
		left: 0;
		top: 10%;
		width: 4px;
		height: 80%;
		background-color: var(--el-color-primary);
	}
}
.form-box{
	margin: 0 auto !important;
	max-width: 1400px;
}
</style>